<script setup lang="ts" name="Map">
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
let map: any = null; // 给map变量添加类型注解
onMounted (() => {
  AMapLoader.load ( {
    key: "02999826861b85822a4a878e58bd0a0d", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Geolocation'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
  .then ((AMap) => {
    map = new AMap.Map ("container", { // 设置地图容器id
      viewMode: "3D", // 是否为3D地图模式
      zoom: 11, // 初始化地图级别
      center: [116.397428, 39.90923], // 初始化地图中心点位置
    });
  })
  .catch ((e) => {
    // console.log (e);
  });
});
onUnmounted (() => {
  map?.destroy ();
});
</script>
<template>

  <div class="home-map-container">
    
    <div>
      <div class="home-map-title">
        营业网点
      </div>
      <div class="home-map-tip">全国3500+服务网点为您提供安全出行服务</div>
      <div id="container" ></div>
    </div>
  </div>
  
</template>
<style scoped>
  #container {
    width: 1240px;
    height: 500px;
  }

  .home-map-container{
    background-color: white;
    height: 800px;
    margin: 0 auto; /* 设置左右边距为 auto，实现水平居中*/
    display: flex; /* 使用 flex 布局*/
    justify-content: center; /* 水平方向上居中*/
    align-items: center; /* 垂直方向上居中*/
 }
  .home-map-title {
    width: 1240px;
    margin-bottom: 10px;
    height: 40px;
    font-size: 32px;
    color: rgba(10, 6, 6, 0.714);
    line-height: 40px;
    text-align: center;
  }
  .home-map-tip{
    width: 1240px;
    margin-bottom: 32px;
    height: 24px;
    font-size: 14px;
    color: rgba(29, 25, 25, 0.466);
    line-height: 24px;
    text-align: center;
  }
  
</style>
